<template>
	<view>
		<view class="title">
			<view class="line">
			</view>
			<view class="text">
				患者资料
			</view>
		</view>
		<uni-card :is-shadow="false" class="_card" @click="onClickInfonDetail">
			<view class="_info">
				<text>
					{{infoVal.name}}
				</text>
				<text>
					{{infoVal.gender === '1' ? '男' : '女'}}
				</text>
				<text>
					{{infoVal.age}}岁
				</text>
				<text>
					{{infoVal.tel}}
				</text>
			</view>
			<view class="_tags">
				<uni-tag class="_tag" v-for="(item,index) in list" :inverted="true" :text="item" type="error"
					:key="index" />
			</view>

			<image src="../../../static/lefTarrow.png" mode="" class="_icons"></image>
		</uni-card>
		<view class="title">
			<view class="line">
			</view>
			<view class="text">
				患者轨迹
			</view>
		</view>
		<uni-card :is-shadow="false" v-for="item in _.trajectory" :key="item.userId"
			@click="trajechoryDetail(item.reservationId)">
			<view class="_form">
				<image src="../../../static/lefTarrow.png" mode="" class="_icons"></image>
				<view class="_itemTitle">
					门诊 {{item.visitTime || ''}}
				</view>
				<view class="_item">
					<view class="_label">
						诊所：
					</view>
					<view class="_content">
						{{item.institutionName}}
					</view>
				</view>
				<view class="_item">
					<view class="_label">
						医生：
					</view>
					<view class="_content">
						{{item.doctor}}
					</view>
				</view>
				<view class="_item">
					<view class="_label">
						诊断：
					</view>
					<view class="_content">
						{{item.dises}}
					</view>
				</view>
				<view class="_item">
					<view class="_label">
						付费：
					</view>
					<view class="_content">
						{{item.medfeeSumamt}}
					</view>
				</view>
			</view>

		</uni-card>
		<uni-popup ref="popup" type="bottom" v-if="_.formData" background-color="#fff" @change="change">
			<view class="infoBox">
				<view class="info">
					<view class="item">
						{{infoVal.name}} {{infoVal.age}}岁
					</view>
					<view class="item" style="margin-top: 12rpx;">
						<text>
							患者标签：
						</text>
						<view class="_tags">
							<uni-tag class="_tag" v-for="(item,index) in list" :inverted="true" :text="item"
								type="error" :key="index" />
						</view>
						<view class="ioncs">
							<uni-icons type="plusempty" @click="onIoncs" size="12" color="#51a7ff"></uni-icons>
						</view>

					</view>
				</view>
				<view class="operate">
					<button size="mini" v-if="_.inputFlag" type="primary" style="background-color: #66b1ff;"
						@click="onClickEdit">编辑资料</button>
					<button size="mini" v-if="!_.inputFlag" type="default" @click="onClickNo"
						style="margin-right: 12rpx;">取消</button>
					<button size="mini" v-if="!_.inputFlag" type="primary" @click="onClickOk">保存</button>
				</view>

				<view class="hr">
				</view>


				<uni-forms label-width="80px" label-align="right">
					<uni-forms-item label="姓名:" name="name">
						<uni-easyinput type="text" :disabled="_.inputFlag" v-model="_.formData.name"
							placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="性别:" name="gender">
						<uni-data-checkbox :disabled="_.inputFlag" v-model="_.formData.gender" :localdata="_.sexs" />
					</uni-forms-item>
					<uni-forms-item label="手机号码:" name="tel">

						<uni-easyinput :disabled="_.inputFlag" type="text" v-model="_.formData.tel"
							placeholder="请输入手机号码" />
					</uni-forms-item>
					<uni-forms-item label="年龄:" name="age">
						<uni-easyinput :disabled="_.inputFlag" v-model="_.formData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="身份证号:" name="certno">
						<uni-easyinput :disabled="_.inputFlag" type="text" v-model="_.formData.certno"
							placeholder="请输入身份证号码" />
					</uni-forms-item>
					<uni-forms-item label="座机号:" name="fixPhone">
						<uni-easyinput :disabled="_.inputFlag" type="text" v-model="_.formData.fixPhone"
							placeholder="请输入座机号" />
					</uni-forms-item>
					<uni-forms-item label="职业:" name="occupation">
						<uni-easyinput :disabled="_.inputFlag" type="text" v-model="_.formData.occupation"
							placeholder="请输入职业" />
					</uni-forms-item>
					<uni-forms-item label="地址:" name="picker">
						<picker mode="region" @change="selectHomeChange" :value="homeIndex" :disabled="_.inputFlag">
							<input :disabled="_.inputFlag" v-model="_.picker" disabled placeholder="请选择省市区"
								class="inputs" :style="_.inputFlag ? 'background-color:#f7f6f6;color:#d9d9d7;':'' " />
						</picker>
					</uni-forms-item>
					<uni-forms-item label="详细地址:" name="address">
						<uni-easyinput :disabled="_.inputFlag" type="text" v-model="_.formData.address"
							placeholder="请输入详细地址" />
					</uni-forms-item>
				</uni-forms>
			</view>

		</uni-popup>
		<uni-popup ref="inputDialog">

			<uni-popup-dialog ref="inputClose" mode="input" title="备注: 敲空格分割" :value="tagValue" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>


		<uni-popup ref="trajectoryPopup" background-color="#fff" @change="change">
			<scroll-view scroll-y="true" class="scrool">
				<uni-section title="诊断信息" type="line" />
				<view style="padding: 0 30rpx;">
					<uni-forms label-width="100px">
						<uni-forms-item label="患者主诉：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.chfcomp"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="现病史：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.diseNow"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="既往史：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.pastHistory"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="过敏史：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.algsHis"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="标签：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.tagIds"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="其他检查：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.otherCheck"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="望闻问切：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.look"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="医疗类别：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.medType"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="诊断：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.diagnosis"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="处置：">

							<div class="input">
								<uni-easyinput v-model="trajectoryData.caseHistory.upperLeft" placeholder="右上"
									:disabled="trajectoryData.disabled" />
								<uni-easyinput v-model="trajectoryData.caseHistory.upperRight" placeholder="左上"
									:disabled="trajectoryData.disabled" />
								<uni-easyinput v-model="trajectoryData.caseHistory.lowerRight" placeholder="右下"
									:disabled="trajectoryData.disabled" />
								<uni-easyinput v-model="trajectoryData.caseHistory.lowerLeft" placeholder="左下"
									:disabled="trajectoryData.disabled" />
							</div>
							<uni-easyinput type="textarea" autoHeight v-model="trajectoryData.caseHistory.disposalContent"
								:disabled="trajectoryData.disabled" placeholder="请输入"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="个人史：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.psnHis"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="流行病史：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.epidemicHistory"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="家族遗传史：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.fmhis"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="月经婚育史：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.menaHis"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="医嘱：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.doctorAdvice"
								:disabled="trajectoryData.disabled" />
						</uni-forms-item>
						<uni-forms-item label="体温(℃)：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.physexmTprt"
								:disabled="trajectoryData.disabled" placeholder="30.0-45.0" />
						</uni-forms-item>
						<uni-forms-item label="呼吸(次)：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.physexmVentFrqu"
								:disabled="trajectoryData.disabled" placeholder="5-50" />
						</uni-forms-item>
						<uni-forms-item label="心率(次/分)：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.heartRate"
								:disabled="trajectoryData.disabled" placeholder="50-200" />
						</uni-forms-item>
						<uni-forms-item label="体重(kg)：">
							<uni-easyinput type="text" v-model="trajectoryData.caseHistory.physexmWt"
								:disabled="trajectoryData.disabled" placeholder="1-300" />
						</uni-forms-item>
						<uni-forms-item label="血压：">
							<view class="_sides">
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.physexmSystolicPre"
									:disabled="trajectoryData.disabled" placeholder="5-200" />
								<text class="textColor">mmHg</text>
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.physexmDstlPre"
									:disabled="trajectoryData.disabled" placeholder="5-50" />
								<text class="textColor">mmHg</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="体格检查：">
							<uni-easyinput type="textarea" autoHeight v-model="trajectoryData.caseHistory.physexmOrdnStas"
								:disabled="trajectoryData.disabled" placeholder="请输入"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="裸眼近视力：">
							<view class="_sides">
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.leftUCNVA"
									:disabled="trajectoryData.disabled" placeholder="左:" />
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.rightUCNVA"
									:disabled="trajectoryData.disabled" placeholder="右:" />
							</view>

						</uni-forms-item>
						<uni-forms-item label="戴眼近视力：">
							<view class="_sides">
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.leftWGNV"
									:disabled="trajectoryData.disabled" placeholder="左:" />
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.rightWGNV"
									:disabled="trajectoryData.disabled" placeholder="右:" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="裸眼远视力：">
							<view class="_sides">
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.leftUDVA"
									:disabled="trajectoryData.disabled" placeholder="左:" />
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.rightUDVA"
									:disabled="trajectoryData.disabled" placeholder="右:" />
							</view>
						</uni-forms-item>
						<uni-forms-item label="戴眼远视力：">
							<view class="_sides">
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.leftWGFDV"
									:disabled="trajectoryData.disabled" placeholder="左:" />
								<uni-easyinput type="text" v-model="trajectoryData.caseHistory.rightWGFDV"
									:disabled="trajectoryData.disabled" placeholder="右:" />
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>


				<uni-section title="处方信息" type="line" />
				<view class="prescriptionTitle">
					<view>
						{{trajectoryData.title}}
					</view>
					<view>
						处方编号：{{trajectoryData.prescriptionId}}
					</view>
					<!-- <view>
						医嘱：{{trajectoryData.doctorAdvice}}
					</view> -->
				</view>
				<uni-table ref="table" :loading="trajectoryData.loading" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">药品</uni-th>
						<uni-th align="center">药品类型</uni-th>
						<uni-th align="center">厂家</uni-th>
						<uni-th align="center">总量</uni-th>
						<uni-th align="center">零售价</uni-th>
						<uni-th align="center">金额</uni-th>
						<uni-th align="center">单次用量</uni-th>
						<uni-th align="center">频率</uni-th>
						<uni-th align="center">医嘱</uni-th>
						<uni-th align="center">国家医保编码</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in trajectoryData.prescriptionsdetails" :key="index">
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">{{ item.rxType }}</uni-td>
						<uni-td align="center">{{ item.manufacturer }}</uni-td>
						<uni-td align="center">{{ item.cnt }}</uni-td>
						<uni-td align="center">{{ item.retailPrice }}</uni-td>
						<uni-td align="center">{{ item.amt }}</uni-td>
						<uni-td align="center">{{ item.dosage }}</uni-td>
						<uni-td align="center">{{ item.rxFrquName }}</uni-td>
						<uni-td align="center">{{ item.doctorAdvice }}</uni-td>
						<uni-td align="center">{{ item.mdtrtId }}</uni-td>
					</uni-tr>
				</uni-table>

				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="trajectoryData.params.pageSize"
						:current="trajectoryData.params.pageCurrent" :total="total" @change="changeTrajectory" /></view>

				<view class="statistics">
					共计：<text>{{trajectoryData.prescriptionsdetails.length}}</text>件小计：<text>{{totalAmount}}</text>元
				</view>


				<uni-section title="附加费用" type="line" />

				<uni-table ref="table" :loading="trajectoryData.loading" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">名称</uni-th>
						<uni-th align="center">次数</uni-th>
						<uni-th align="center">金额(元)</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in trajectoryData.details_Fujiafei" :key="index">
						<uni-td align="center">{{ item.surchargeName }}</uni-td>
						<uni-td align="center">1</uni-td>
						<uni-td align="center">{{ item.amt }}</uni-td>
					</uni-tr>
				</uni-table>

				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="trajectoryData.params.pageSize"
						:current="trajectoryData.params.pageCurrent" :total="total" @change="changeTrajectory" /></view>

				<view class="statistics">
					共计：<text>{{ trajectoryData.details_Fujiafei.length}}</text>件小计：<text>{{trajectoryData.subtotal}}</text>元
				</view>
			</scroll-view>
		</uni-popup>



	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';

	import {
		getDetail,
		getPatientTrajectory,
		getEdit,
		hcDetails
	} from "./request.js"
	import {
		reactive,
		ref,
		computed
	} from "vue";



	// 轨迹
	const trajectoryPopup = ref(null)
	const trajectoryData = reactive({
		disabled: true,
		title: '这是动态标题(注意)',
		caseHistory: {
			name: "",
		},
		details_Fujiafei:[],
		prescriptionsdetails: [],
		loading: false,
		total: 1,
		params: {
			pageCurrent: 1,
			pageSize: 5,
		}
	})

	const totalAmount = computed(() => {
		let amount = 0
		trajectoryData.prescriptionsdetails.map((a) => {
			amount += a.cnt*a.amt
		})
		return amount
	})

	const trajechoryDetail = (id) => {
		console.log(id);
		hcDetails({id:id,isSplit:true}).then(res=>{
			trajectoryData.caseHistory = res.data.caseHistory
			trajectoryData.prescriptionsdetails = res.data.prescriptions.map((a)=> {
				return a.details.map((b)=> {
					return {
						...b,
						rxType:  {1:'中西成药',2:'注射处方',4:'中药处方',7:'敷贴处方',8:'校验治疗',3:'医疗器械'}[a.rxType]
					}
				})
			}).filter(Boolean).flat(5)
			trajectoryData.details_Fujiafei = res.data.prescriptions.map((a)=> a.details_Fujiafei).filter(Boolean)
		})
		trajectoryPopup.value.open('bottom')
	}

	const changeTrajectory = () => {}


	// 


	const popup = ref(null)

	const inputDialog = ref(null)

	const infoVal = ref({})

	const list = ref([])


	const _ = reactive({
		trajectory: [],
		formData: {},
		picker: '',
		inputFlag: true,
		sexs: [{
			text: '男',
			value: "1"
		}, {
			text: '女',
			value: "2"
		}],
	})

	const homeIndex = ref("北京")
	const selectHomeChange = (e) => {
		console.log(e);
		_.formData.province = e.detail?.value[0];
		_.formData.city = e.detail?.value[1];
		_.formData.area = e.detail?.value[2];
		let val = e.detail.value.join("-");
		_.picker = val;
	}
	const inputs = ref();


	const init = (id) => {
		let params = {
			id: id
		}
		getPatientTrajectory(params).then((res) => {
			console.log(res);
			_.trajectory = res.data.records
		})
	}

	onLoad((e) => {
		let detailId = e.id
		getDetail({
			id: detailId
		}).then((res) => {
			if (res.data) {
				init(res.data.id)
				infoVal.value = res.data
				_.picker = res.data.province + '-' + res.data.city + '-' + res.data.area
				_.formData.gender = res.data.gender
				_.formData = res.data
				if (res.data.tagIds !== null) {
					list.value = res.data.tagIds.split(' ')
				}
			}

		})
	})

	const onClickInfonDetail = () => {
		popup.value.open('bottom')
	}

	const change = () => {

	}

	const onClickEdit = () => {
		_.inputFlag = false
	}

	const onClickNo = () => {
		_.inputFlag = true
	}
	const onClickOk = (e) => {
		_.inputFlag = true
		getEdit(_.formData).then((res) => {
			if (res.code === 200) {
				uni.showToast({
					title: '编辑成功',
					icon: 'success'
				});
				if (!e) {
					popup.value.close()
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error'
				});
			}
		})
	}

	const tagValue = ref("")

	const dialogInputConfirm = (e) => {
		console.log(e);
		_.formData.tagIds = e
		list.value = e.split(' ')
		onClickOk(true)
		inputDialog.value.close()
	}

	const onIoncs = () => {
		tagValue.value = list.value.join(' ')
		inputDialog.value.open()
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.uni-forms {
		width: 100%;

		.uni-forms-item {
			box-sizing: border-box;

			.uni-forms-item__content {
				.uni-easyinput {
					flex: unset;

					.is-input-border {
						border: unset;
					}
				}
			}

			&:nth-child(10) {
				display: flex;
				flex-direction: column;
				justify-content: left;
				align-items: unset;

				.uni-forms-item__content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.uni-easyinput {
						border: 1rpx solid #ccc;
						margin: 15rpx 15rpx 15rpx 0rpx;
					}

					.input {
						width: 400rpx;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.uni-easyinput {
							border: unset;
							width: 120rpx;
							margin: 0;

							&:nth-child(1) {
								border-bottom: 1rpx solid #ccc;
								border-right: 1rpx solid #ccc;
							}

							&:nth-child(2) {
								border-bottom: 1rpx solid #ccc;
							}

							&:nth-child(3) {
								border-right: 1rpx solid #ccc;
							}
						}
					}
				}
			}
		}
	}

	.scrool {
		height: 900rpx;
		overflow: scroll;
		overscroll-behavior: none;
	}

	// 
	.section {
		background-color: #f6f6f6;
	}

	._info {
		display: flex;
		justify-content: space-between;
		padding-right: 60rpx;
	}

	.title {
		padding-left: 40rpx;
		display: flex;

		.line {
			width: 4rpx;
			background-color: #1ec761;
		}

		.text {
			margin-left: 12rpx;
			color: #1ec761;
		}
	}

	._card {
		margin-top: 0;
		position: relative;
		display: flex;

		._tags {
			margin-top: 16rpx;
			width: 95%;
			display: flex;
			flex-wrap: wrap;

			._tag {
				margin: 8rpx;
			}
		}

		._icons {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 60rpx;
			top: 40%;
		}
	}

	._content {
		height: 100%;
		display: flex;
		align-items: center;
	}

	._form {
		position: relative;
		display: flex;
		flex-direction: column;

		._icons {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 0rpx;
			top: 50%;
		}

		._item {
			margin: 8rpx 0;
			display: flex;

			._content {
				margin-left: 8rpx;
			}
		}
	}

	.infoBox {
		padding: 24rpx;
		position: relative;

		._tags {
			display: flex;
			flex-wrap: wrap;

			._tag {
				margin: 8rpx;
			}
		}

		.operate {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}

		.item {
			display: flex;
			margin: 9rpx 0;
		}

		text {
			width: 200rpx;
		}

		.ioncs {
			height: 42rpx;
			border-radius: 8rpx;
			padding: 6rpx 24rpx;
			margin-left: 12rpx;
			background-color: #ecf5ff;
		}

		.hr {
			width: 100%;
			height: 2rpx;
			background-color: #dddddd;
			margin: 34rpx 0;
		}
	}

	.inputs {
		display: inline-block;
		border: 1rpx solid #e3e3e3;
		width: calc(99% - 32rpx);
		padding: 14rpx 16rpx;
		border-radius: 6rpx;
		font-size: 26rpx;
	}

	._sides {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.uni-easyinput {
			margin-left: 8rpx;
		}
	}

	.prescriptionTitle {
		font-size: 12px;
		color: #333;
		padding-left: 60rpx;

		view {
			margin-bottom: 6rpx;
		}
	}

	.statistics {
		text-align: right;
		margin: 12rpx;

		text {
			color: #f56c6c;
		}
	}

	.textColor {
		color: #c7cad1;
	}
</style>